<template>
  <div class="main-container container-fluid container-limited page-holder">
    <breadcrumb />
    <div class="page-title-holder no-border-bottom">
      <h2 class="page-title">新建学习群组</h2>
    </div>
    <p>群组是有共同目标的人的聚集地，群组管理者可以查看群组的统计信息。</p>
    <el-form
      ref="form"
      label-position="top"
      :model="form"
      :rules="rules"
      class="bold-label form-border m-t-16"
    >
      <el-form-item label="群组名" prop="title" ref="title">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="群组描述">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="用户加入群组时需要填写的信息">
        <join-conditions :added-items.sync="form.joinConditions" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" :loading="loading">新建群组</el-button>
        <el-button class="right" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import JoinConditions from './join-conditions';

export default {
  name: 'GroupsCreate', // 创建群组
  components: { JoinConditions },
  data() {
    return {
      form: {
        title: '', // 群组名
        desc: '', // 群组描述
        joinConditions: [], // 加入条件
      },
      rules: {
        title: [{ required: true, validator: this.$va.groupTitle, trigger: 'blur' }],
      },
      loading: false,
    };
  },
  methods: {
    // 新建群组
    onSubmit() {
      this.$refs.form.validate((valid, errs) => {
        if (valid) {
          this.isLoading = true;
          const params = Object.assign({}, this.form, { spaceId: this.$route.params.spaceId });
          this.$api.groups.create(params)
            .then((res) => {
              this.$message.success('创建成功');
              this.$router.push(`/groups/${res.data.id}`);
            })
            .catch(() => {})
            .then(() => { this.loading = false; });
        } else this.$refs[Object.keys(errs)[0]].$el.scrollIntoView({ block: 'center' });
      });
    },
  },
};
</script>

<style></style>
